<template>
<div>
<span>tab is :{{tabName}}</span>
<span>status is :{{status}}</span>
  <el-table
    :data="tableData2"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="tabName"
      label="tabName"
      width="180">
    </el-table-column>
    <el-table-column
      prop="status"
      label="status"
      width="180">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>


<script>
import Event from '../bus'

  export default {
    props:['tabName'],
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      loadData:function(_tabName,_status,_pTabName){
         console.log("load data function",_tabName,_status,_pTabName);
        if(_tabName===_pTabName){
          var api = "http://127.0.0.1:5000/table/bj?tabName="+_tabName+"&status="+_status;
          this.axios.get(api).then((response) => {
            console.log(response.data);
            this.tableData2=response.data;
          })
        }
      }
    },
    watch:{
      tabName:{
        immediate:true,
        handler:function(){
            this.loadData(this.tabName,this.status,this.$parent.name);
            console.log("table watch",this.tabName);
            console.log(this.$parent.name);  
        }
      },
      status:{
        immediate:true,
        handler:function(){
          this.loadData(this.tabName,this.status,this.$parent.name);
          console.log("table watch",this.status)
        }
      }
    },
    mounted: function () {
        console.log("mounted");
    
    },
    created () {
      Event.$on('update:count', (str) => {
       this.status = str;
      });
      
    },
    data: function() {
      return {
        status:"BJ",
        tableData2: []
      };
    }
  }
</script>